<template>
	<view class="u-page">
		<u-row>
			<!-- 搜索 -->
			<u-col span="10">
				<u--form>
					<u-form-item label="搜索"><u--input v-model="query.keyWord" clearable placeholder="请输入关键字" border="none"></u--input></u-form-item>
				</u--form>
			</u-col>
			<u-col span="2"><u-button size="small" type="primary" @click="onSearch">搜索</u-button></u-col>
		</u-row>
		<u-line></u-line>
		<u-sticky offset-top="160">
			<u-row>
				<!-- 左侧分类 -->
				<u-col span="3">
					<u-list>
						<u-list-item v-for="(item, i) in categoryList" :key="i">
							<u-cell @click="onClickLeftMenus(item.id)">
								<text slot="title" class="u-line-1">{{ item.name }}</text>
							</u-cell>
						</u-list-item>
					</u-list>
				</u-col>
				<!-- 右侧商品列表 -->
				<u-col span="9">
					<u-list>
						<!-- 商品卡片列表 -->
						<view class="u-product" v-for="(item, i) in productList" :key="i" @click="onDetail(item.id)">
							<view class="__left"><u--image :src="$fullUrl(item.pic)" width="80" height="80"></u--image></view>
							<view class="__right">
								<text class="__name u-line-1">{{ item.name }}</text>
								<text class="__spec u-line-1">{{ item.spec }}</text>
								<text class="__price">${{ item.price }}</text>
							</view>
						</view>
					</u-list>
					<u-loadmore :status="status" :line="true" />
				</u-col>
			</u-row>
		</u-sticky>
	</view>
</template>

<script>
//1.导入封装后的接口
import * as ProductAPI from '@/api/product.js';
import * as CategoryAPI from '@/api/category.js';

export default {
	data() {
		return {
			productList: [], //商品类别（指定分类id）
			categoryList: [], //分类列表
			pageTotal: 0, //总页数

			//上拉加载控制变量
			status: 'loadmore', // loadmore / loading / nomore
			
			//下拉刷新
			refreshing: false,

			//查询参数
			query: {
				category_id: null,
				pageIndex: 0, //当前页码,页码从1开始计
				pageSize: 8, //页码大小
				keyWord: '' //查询关键字
			}
		};
	},

	//生命周期的钩子函数，当实例别创建好了后被调用
	onLoad() {
		//获取所有分类
		CategoryAPI.getCategory().then(result => {
			console.log(result); //调式输出，也可以看看数据结构
			this.categoryList = result.data;
			this.query.category_id = this.categoryList[0].id; //取分类列表中的第一个分类id
			this.onRefresh();
		});
	},
	//上拉加载
	onReachBottom() {	
		console.log("onReachBottom pageIndex",this.query.pageIndex)
		this.loadProductList();		
	},
	// 下拉刷新
	onPullDownRefresh(){
		console.log('refresh');		
		this.onRefresh();
		uni.stopPullDownRefresh();
	},
	
	methods: {
		// 单击左菜单中的某一项后，显示对应分类的商品列表
		onClickLeftMenus(category_id) {
			this.query.category_id = category_id; //更新分类id
			this.onRefresh();
		},

		onDetail(id) {
			uni.navigateTo({
				url: `./ProductDetail?productId=${id}`
			});
		},
		
		loadProductList() {
			if(this.status === "nomore") return;
			
			this.query.pageIndex += 1; //页码增加			
			this.status = 'loading';
			
			ProductAPI.getProductList(this.query).then(result => {
				//如果是刷新就商品列表清空
				if (this.refreshing) {
					this.productList = [];
					this.refreshing = false;
				}

				//总页数
				this.pageTotal = result.pageTotal;
				//数组 拼接
				if (result.data.length > 0) {
					this.productList = this.productList.concat(result.data);
				}
				
				this.status = 'loadmore';				
				if (this.query.pageIndex >= this.pageTotal) {
					this.status = 'nomore';				
				}				
			});
		},

		//下拉刷新(初始右侧列表数据)
		onRefresh() {
			// 清空列表数据
			this.query.pageIndex = 0; //重置页号
			this.status = 'loadmore';		
			this.refreshing = true;
			// 重新加载数据
			this.loadProductList();
		},

		//搜索商品
		onSearch() {
			this.onRefresh();
		}
	}
};
</script>

<style></style>
